$(function() {
  // 准备假数据
  var arr = ["耐克", "李宁", "新百伦", "耐克王", "阿迪王"];
  // 存到本地中
  localStorage.setItem("search", JSON.stringify(arr));
  // 从本地中获取,渲染数据
  function render() {
    var history = JSON.parse(localStorage.getItem("search")) || [];
    console.log(history);
    $(".search-main").html(template("tmp", { list: history }));
  }
  render();

  // 2.点击清空历史记录，弹出确认框，确认后删除本地存储的数据。
  // 删除后页面重新渲染。
  $(".search-main").on("click", ".history-clear", function() {
    // mui.confirm(消息， 标题，[按钮组]， function (){});
    mui.confirm("确定删除嘛", "警告", ["取消", "确定"], function(e) {
      // e.index是按钮的下标。
      if (e.index == 1) {
        // 说明点击的是确定按钮，对应的删除浏览器存储的内容
        localStorage.removeItem("search");
        render();
      }
    });
  });

  // 3.删除单个历史。
  // 点击单个删除按钮，获取点击元素的下标，并弹出弹框。
  // 在弹框中点击确定，先获取本地中的数据(首先先转换成数组，数组根据下标进行删除，删除后，再转换成字符串。)
  // 最后页面重新渲染。
  $(".search-main").on("click", ".history-del", function() {
    var index = $(this).data("index");
    mui.confirm("确定删除嘛", "警告", ["取消", "确定"], function(e) {
      if (e.index == 1) {
        // 从本地中获取数据
        var arr = JSON.parse(localStorage.getItem("search"));
        arr.splice(index, 1);
        localStorage.setItem("search", JSON.stringify(arr));
        render();
      }
    });
  });

  // 4.添加历史记录。
  // 点击搜索按钮，获取表单数据，数据为空，直接返回。
  // 获取表单数据，将字符串转换成数组，在数组里进行添加，再把数组转换成字符串添加到本地。
  // 添加后页面重新渲染。
  // 注意：1.添加历史记录时，要判断历史记录是否有重复项，有则删除原来的历史记录。
  // 2.添加完记录时，总的历史记录不能超过六条。如果大于六条，删除。
  $(".search-btn").click(function() {
    // 1.
    var txt = $(".search-txt").val();
    if (txt.trim().length == 0) {
      // 提示
      mui.toast("请输入关键字");
      return;
    }
    $(".search-txt").val("");
    // 2.从本地中获取数据转换成数组，在数组中添加input内容。
    var arr = JSON.parse(localStorage.getItem("search"));
    // 222.去重。(indexOf是判断数组里面是否有重复项,有的话就返回数组对应的下标)
    var index = arr.indexOf(txt);
    if (index > -1) {
      arr.splice(index, 1);
    }
    // 向数组里面添加。
    arr.unshift(txt);
    // 22222.数据不超过六条
    if (arr.length > 6) {
      arr.pop();
    }
    localStorage.setItem("search", JSON.stringify(arr));
    // 3.
    render();
    // 点击搜索根据关键字调到相应的页面
    location.href = "./searchList.html?key=" + txt;
  });
});
